<template>
  <div class="box">
    <van-search
      class="search"
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
    >
      <template #action>
        <span class="iconfont">&#xe607;</span>
      </template>
      <template #label>
        <span @click="$router.push('/adress')"
          >{{ adress }} <van-icon name="arrow-down" />
        </span>
      </template>
    </van-search>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in imgList" :key="item.id">
        <img :src="item.imgSrc" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- <router-view></router-view> -->
    <div class="xcv">
      <van-grid clickable abc :column-num="4" class="qwe">
        <van-grid-item icon="wap-home-o" text="整租" to="/main" />
        <van-grid-item icon="friends-o" text="合租" to="/hezu" />
        <van-grid-item icon="location-o" text="地图找房" to="/mapfound" />
        <van-grid-item icon="shop-collect-o" text="去出租" to="/gohouse" />
      </van-grid>
    </div>
    <div class="zxc">
      <h3>租房小组 <span>更多</span></h3>
      <div class="main">
        <van-grid direction="horizontal" :column-num="2" :gutter="5">
          <van-grid-item v-for="item in zufangmsg" :key="item.id" :gutter="5">
            <img :src="item.imgSrc" alt="" />
            <div class="text">
              <span>{{ item.title }}</span>
              <br />
              <span>{{ item.desc }}</span>
            </div>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { getImage, getZufang } from '@/api/homepage'
export default {
  name: 'HomePage',
  components: {},

  props: {},
  data() {
    return {
      value: '',
      imgList: [],
      zufangmsg: [],
      str: 'http://liufusong.top:8080',
      adress: window.localStorage.getItem('city')
        ? JSON.parse(window.localStorage.getItem('city')).label
        : '杭州'
    }
  },
  computed: {},
  watch: {},
  async created() {
    const res = await getImage()
    this.imgList = res.data.body
    this.imgList = this.imgList.map((item) => {
      item.imgSrc = this.str + item.imgSrc
      return item
    })
    const res1 = await getZufang()
    this.zufangmsg = res1.data.body
    this.zufangmsg = this.zufangmsg.map((item) => {
      item.imgSrc = this.str + item.imgSrc
      return item
    })
    console.log(this.zufangmsg)
  },
  methods: {}
}
</script>

<style scoped lang="less">
.zxc {
  background-color: #f6f5f6;
  padding-top: 10px;
  padding-bottom: 10px;
  h3 {
    position: relative;
    margin: 0 auto;
    height: 22px;
    font-size: 15px;
    span {
      color: #787d82;
      position: absolute;
      right: 0;
      font-size: 14px;
      font-weight: 400;
    }
  }
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
  height: 212px;
  img {
    width: 100%;
    height: 211px;
  }
}
.box {
  position: relative;
}
.search {
  position: absolute;
  top: 0;
  z-index: 1;
  width: 100%;
  background-color: transparent;
}

.xcv {
  padding: 10px 0 10px 0;
  ::v-deep .van-grid-item__content {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #f2fbf7;

    .van-grid-item__icon {
      color: #06b069;
      font-size: 10.46667vw;
    }
  }
}
.qwe {
}

.zxc {
  ::v-deep .van-grid-item__content--horizontal {
    img {
      width: 30%;
      margin-right: 10px;
    }
    font-size: 14px;
  }
}
::v-deep .van-grid-item__content--horizontal {
  margin-bottom: 10px;
}
</style>
